<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>品优购</title>
    <meta name="description" content=""/>
    <meta name="keywrods" content=""/>

    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" href="./font/iconfont.css">
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <!-- 头部 -->
    <header>
        <!-- 快捷导航栏部分 -->
        <div class="shorcut clearfix">
            <div class="shorcut-left">
                <a href="">品优购欢迎您！</a><a class="across" href="register.html">请登录</a><a class="across" href="register.html">免费注册</a><a href="">友情链接</a>
            </div>
            <div class="shorcut-right clearfix">
                <p class="order">我的订单
                </p>
                <span></span>
                <p class="my">我的品优购
                    <i class="iconfont icon-xialasanjiao"></i>
                </p>
                <span></span>
                <p class="members">品优购会员
                    <i class="iconfont icon-xialasanjiao"></i>
                </p>
                <span></span>
                <p class=" procurement">企业采购
                    <i class="iconfont icon-xialasanjiao"></i>
                </p>
                <span></span>
                <p class="attention">关注品优购
                    <i class="iconfont icon-xialasanjiao"></i>
                </p>
                <span></span>
                <p class="custmer">客户服务
                    <i class="iconfont icon-xialasanjiao"></i>
                </p>
                <span></span>
                <p class="navigation">网站导航
                    <i class="iconfont icon-xialasanjiao"></i>
                </p>
            </div>
        </div>

        <!-- 头部区域 -->
        <div class="header-wrap ">
            <div class="logo">
                <h1>
                    <img src="./images/icon.png" alt="品优购商城">
                    <a href="index.html"></a>
                </h1>
            </div>
            
            <div class="search-wrap">
                <div class="search">
                    <input type="search" placeholder="语言开发" >
                    <button>搜索</button>
                </div>
                <div class="hotwords">
                    <ul class="clearfix">
                        <li>优惠首发</li>
                        <li>亿元优惠</li>
                        <li>9.9团购</li>
                        <li>每满99减30</li>
                        <li>办公用品</li>
                        <li>电脑</li>
                        <li>通信</li>
                    </ul>
                </div>
            </div>
            <div class="shopping-car">
                <i class="iconfont icon-gouwucheman"></i>
                <span>我的购物车</span>
                <i class="iconfont icon-youjiantou"></i>
            </div>
        </div>
        <!-- 头部菜单栏 -->
        <div class="content-menu clearfix">
            <h2>全部商品分类</h2>
            <ul >
                <li><a href="">服装城</a></li>
                <li><a href="">美妆馆</a></li>
                <li><a href="">传智超市</a></li>
                <li><a href="">全球购</a></li>
                <li><a href="">闪购</a></li>
                <li><a href="">团购</a></li>
                <li><a href="">拍卖</a></li>
                <li><a href="">有趣</a></li>
            </ul>
        </div>
    </header>

    <div class="middle-wrap">
        <!-- 左侧侧边栏 -->
        <div class="sidebar">
            <!-- <h2>全部商品分类</h2> -->
            <ul>
                <li>
                    <p>
                        <a href="goods details.html"">家用电器</a>
                    <i class="iconfont icon-youjiantou"></i>
                    </p>
                </li>
                <li>
                    <p>
                        <a href="goods details.html"">手机、数码、通信</a>
                    <i class="iconfont icon-youjiantou"></i>
                    </p>
                </li>
                <li>
                    <p>
                        <a href="goods details.html"">电脑、办公</a>
                    <i class="iconfont icon-youjiantou"></i>
                    </p>
                </li>
                <li>
                    <p>
                        <a href="goods details.html"">家居、家具、家装、厨具</a>
                    <i class="iconfont icon-youjiantou"></i>
                    </p>
                </li>
                <li>
                    <p>
                        <a href="goods details.html"">男装、女装、家装、内衣</a>
                    <i class="iconfont icon-youjiantou"></i>
                    </p>
                </li>
                <li>
                    <p>
                        <a href="goods details.html"">个户化妆、清洁用品、宠物</a>
                    <i class="iconfont icon-youjiantou"></i>
                    </p>
                </li>
                <li>
                    <p>
                        <a href="goods details.html"">鞋靴、箱包、珠宝、奢侈品</a>
                    <i class="iconfont icon-youjiantou"></i>
                    </p>
                </li>
                <li>
                    <p>
                        <a href="goods details.html"">运动户外、钟表</a>
                    <i class="iconfont icon-youjiantou"></i>
                    </p>
                </li>
                <li>
                    <p>
                        <a href="goods details.html"">汽车、汽车用品</a>
                    <i class="iconfont icon-youjiantou"></i>
                    </p>
                </li>
                <li>
                    <p>
                        <a href="goods details.html"">母婴、玩具乐器</a>
                    <i class="iconfont icon-youjiantou"></i>
                    </p>
                </li>
                <li>
                    <p>
                        <a href="goods details.html"">食品、酒类、生鲜、特产</a>
                    <i class="iconfont icon-youjiantou"></i>
                    </p>
                </li>
                <li>
                    <p>
                        <a href="goods details.html"">医药保健</a>
                    <i class="iconfont icon-youjiantou"></i>
                    </p>
                </li>
                <li>
                    <p>
                        <a href="goods details.html"">图书、音像、电子书</a>
                    <i class="iconfont icon-youjiantou"></i>
                    </p>
                </li>
                <li>
                    <p>
                        <a href="goods details.html"">彩票、旅行、充值、票务</a>
                    <i class="iconfont icon-youjiantou"></i>
                    </p>
                </li>
                <li>
                    <p>
                        <a href="goods details.html"">理财、众筹、白条、保险</a>
                    <i class="iconfont icon-youjiantou"></i>
                    </p>
                </li>
            </ul>
        </div>
        <!-- 头部菜单栏 -->
        <!-- <div class="content-menu">
            <ul >
                <li><a href="">服装城</a></li>
                <li><a href="">美妆馆</a></li>
                <li><a href="">传智超市</a></li>
                <li><a href="">全球购</a></li>
                <li><a href="">闪购</a></li>
                <li><a href="">团购</a></li>
                <li><a href="">拍卖</a></li>
                <li><a href="">有趣</a></li>
            </ul>
        </div> -->
        <!-- 轮播部分 -->
        <div class="banner-wrap">
            <div class="banner-img">
                <img src="./upload/focus.jpg" alt="">
            </div>
            <div class="banner-right">
                <div class="right-up">
                    <h5>品优购快报</h5>
                    <a href="">更多
                        <i class="iconfont icon-youjiantou"></i>
                    </a>
                </div>
                <div class="banner-content">
                    <ul>
                        <li>【特惠】爆款耳机5折秒！</li>
                        <li>【特惠】母亲节，健康好礼低至5折！</li>
                        <li>【特惠】爆款耳机5折秒！</li>
                        <li>【特惠】9.9元洗100张照片！</li>
                        <li>【特惠】长虹智能空调立省1000</li>
                    </ul>
                </div>
                <div class="banner-iphone">
                    <ul class="clearfix">
                        <li>
                            <i class="iconfont icon-shouji"></i>
                            <a href="">话费</a>
                        </li>
                        <li>
                            <i class="iconfont icon-shouji"></i>
                            <a href="">话费</a>
                        </li>
                        <li>
                            <i class="iconfont icon-shouji"></i>
                            <a href="">话费</a>
                        </li>
                        <li>
                            <i class="iconfont icon-shouji"></i>
                            <a href="">话费</a>
                        </li>
                    </ul>
                    <ul class="clearfix no">
                        <li>
                            <i class="iconfont icon-shouji"></i>
                            <a href="">话费</a>
                        </li>
                        <li>
                            <i class="iconfont icon-shouji"></i>
                            <a href="">话费</a>
                        </li>
                        <li>
                            <i class="iconfont icon-shouji"></i>
                            <a href="">话费</a>
                        </li>
                        <li>
                            <i class="iconfont icon-shouji"></i>
                            <a href="">话费</a>
                        </li>
                    </ul>
                    <ul class="clearfix no">
                        <li>
                            <i class="iconfont icon-shouji"></i>
                            <a href="">话费</a>
                        </li>
                        <li>
                            <i class="iconfont icon-shouji"></i>
                            <a href="">话费</a>
                        </li>
                        <li>
                            <i class="iconfont icon-shouji"></i>
                            <a href="">话费</a>
                        </li>
                        <li>
                            <i class="iconfont icon-shouji"></i>
                            <a href="">话费</a>
                        </li>
                    </ul>
                </div>
                <div class="banner-buttom">
                    <img src="./upload/bargain.jpg" alt="">
                </div>
            </div>
        </div>
    </div>

    <!-- 推荐 -->
    <div class="recommend clearfix">
        <div class="clock">
            <i class="iconfont icon-shizhong"></i>
        </div>
        <div class="recommend-ri">
            <ul class="clearfix">
                <li>
                    <a href="goods details.html"">
                        <img src="./upload/pic.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="goods details.html"">
                        <img src="./upload/pic.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="goods details.html"">
                        <img src="./upload/pic.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="goods details.html"">
                        <img src="./upload/pic.jpg" alt="">
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <!-- 楼层 -->
    <div class="floor">
        <div class="floor-hd">
            <h4>家用电器</h4>

            <div class="hd-rh">
                <ul>
                    <li><a href="">热门</a>|</li>
                    <li><a href="">大家电</a>|</li>
                    <li><a href="">生活电器</a>|</li>
                    <li><a href="">厨房电器</a>|</li>
                    <li><a href="">个护健康</a>|</li>
                    <li><a href="">应季电器</a>|</li>
                    <li><a href="">空气/净水</a>|</li>
                    <li><a href="">新奇特</a>|</li>
                    <li><a href="">高端电器</a></li>
                </ul>
            </div>
        </div>
        <div class="floor-bd">
            <div class="list-item-content clearfix">
                <div class="one-item">
                    <ul>
                        <li><a href="goods details.html">节能补贴</a></li>
                        <li><a href="goods details.html"">4k电视</a></li>
                        <li><a href="goods details.html"">空气净化器</a></li>
                        <li><a href="goods details.html"">IH电饭煲</a></li>
                        <li><a href="goods details.html"">滚筒洗衣机</a></li>
                        <li><a href="goods details.html"">电热水器</a></li>
                    </ul>
                    <a href="">
                        <img src="./upload/floor-1-1.png" alt="">
                    </a>
                </div>
                <div class="tow-item">
                    <a href="">
                        <img src="./upload/pic1 (1).jpg" alt="">
                    </a>
                </div>
                <div class="three-item">
                    <a href="">
                        <img src="./upload/floor-1-2.png" alt="">
                        <img src="./upload/floor-1-3.png" alt="">
                    </a>
                </div>
                <div class="four-item">
                    <a href="">
                        <img src="./upload/floor-1-4.png" alt="">
                    </a>
                </div>
                <div class="five-item">
                    <a href="">
                        <img src="./upload/floor-1-5.png" alt="">
                        <img src="./upload/floor-1-6.png" alt="">
                    </a>
                </div>
            </div>
        </div>

        <div class="floor-hd">
            <h4>手机通讯</h4>

            <div class="hd-rh">
                <ul>
                    <li><a href="">热门</a>|</li>
                    <li><a href="">大家电</a>|</li>
                    <li><a href="">生活电器</a>|</li>
                    <li><a href="">厨房电器</a>|</li>
                    <li><a href="">个护健康</a>|</li>
                    <li><a href="">应季电器</a>|</li>
                    <li><a href="">空气/净水</a>|</li>
                    <li><a href="">新奇特</a>|</li>
                    <li><a href="">高端电器</a></li>
                </ul>
            </div>
        </div>
        <div class="floor-bd">
            <div class="list-item-content clearfix">
                <div class="one-item">
                    <ul>
                        <li><a href="">节能补贴</a></li>
                        <li><a href="">4k电视</a></li>
                        <li><a href="">空气净化器</a></li>
                        <li><a href="">IH电饭煲</a></li>
                        <li><a href="">滚筒洗衣机</a></li>
                        <li><a href="">电热水器</a></li>
                    </ul>
                    <a href="">
                        <img src="./upload/floor-1-1.png" alt="">
                    </a>
                </div>
                <div class="tow-item">
                    <a href="">
                        <img src="./upload/pic1 (1).jpg" alt="">
                    </a>
                </div>
                <div class="three-item">
                    <a href="">
                        <img src="./upload/floor-1-2.png" alt="">
                        <img src="./upload/floor-1-3.png" alt="">
                    </a>
                </div>
                <div class="four-item">
                    <a href="">
                        <img src="./upload/floor-1-4.png" alt="">
                    </a>
                </div>
                <div class="five-item">
                    <a href="">
                        <img src="./upload/floor-1-5.png" alt="">
                        <img src="./upload/floor-1-6.png" alt="">
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部 -->
    <footer>
        <div class="footer-service">
            <ul class="clearfix">
                <li class="clearfix">
                    <div class="bgimg-1"></div>
                    <h4>正品保障</h4>
                    <p>正品保障，提供发票</p>
                </li>
                <li>
                    <div class="bgimg-2"></div>
                    <h4>正品保障</h4>
                    <p>正品保障，提供发票</p>
                </li>
                <li>
                    <div class="bgimg-3"></div>
                    <h4>正品保障</h4>
                    <p>正品保障，提供发票</p>
                </li>
                <li>
                    <div class="bgimg-4"></div>
                    <h4>正品保障</h4>
                    <p>正品保障，提供发票</p>
                </li>
                <li>
                    <div class="bgimg-5"></div>
                    <h4>正品保障</h4>
                    <p>正品保障，提供发票</p>
                </li>
            </ul>
        </div>
        <div class="footer-help clearfix">
            <div class="help-left">
                <ul>
                    <dt>购物指南</dt>
                    <dd>购物流程</dd>
                    <dd>会员介绍</dd>
                    <dd>生活旅行/团购</dd>
                    <dd>常见问题</dd>
                    <dd>大家电</dd>
                    <dd>联系客服</dd>
                </ul>
                <ul>
                    <dt>购物指南</dt>
                    <dd>购物流程</dd>
                    <dd>会员介绍</dd>
                    <dd>生活旅行/团购</dd>
                    <dd>常见问题</dd>
                    <dd>大家电</dd>
                    <dd>联系客服</dd>
                </ul>
                <ul>
                    <dt>购物指南</dt>
                    <dd>购物流程</dd>
                    <dd>会员介绍</dd>
                    <dd>生活旅行/团购</dd>
                    <dd>常见问题</dd>
                    <dd>大家电</dd>
                    <dd>联系客服</dd>
                </ul>
                <ul>
                    <dt>购物指南</dt>
                    <dd>购物流程</dd>
                    <dd>会员介绍</dd>
                    <dd>生活旅行/团购</dd>
                    <dd>常见问题</dd>
                    <dd>大家电</dd>
                    <dd>联系客服</dd>
                </ul>
                <ul>
                    <dt>购物指南</dt>
                    <dd>购物流程</dd>
                    <dd>会员介绍</dd>
                    <dd>生活旅行/团购</dd>
                    <dd>常见问题</dd>
                    <dd>大家电</dd>
                    <dd>联系客服</dd>
                </ul>
            </div>
            <div class="help-right">
                <h3>帮助中心</h3>
                <a href=""></a>
                <p>品优购客户端</p>
            </div>
        </div>
        <div class="footer-copyright">
            <div class="friend">
                <ul>
                    <li>
                        <a href="">关于我们</a>
                        |
                    </li>
                    <li>
                        <a href="">联系我们</a>
                        |
                    </li>
                    <li>
                        <a href="">联系客服</a>
                        |
                    </li>
                    <li>
                        <a href="">商家入驻</a>
                        |
                    </li>
                    <li>
                        <a href="">营销中心</a>
                        |
                    </li>
                    <li>
                        <a href="">手机品优购</a>
                        |
                    </li>
                    <li>
                        <a href="">友情链接</a>
                        |
                    </li>
                    <li>
                        <a href="">销售联盟</a>
                        |
                    </li>
                    <li>
                        <a href="">品优购社区</a>
                        |
                    </li>
                    <li>
                        <a href="">品优购公益</a>
                        |
                    </li>
                    <li>
                        <a href="">English Site</a>
                        |
                    </li>
                    <li>
                        <a href="">Contact U</a>
                    </li>
                </ul>
            </div>
            <div class="address">
                <p>地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn</p>
                <a href="">京ICP备08001424号公网安备110108007702</a>
            </div>
        </div>
    </footer>
</body>
</html>